<template>
 <div>
    <select class="form-control" v-model="role" @change="change">
      <option v-for="option in this.roles" v-bind:value="option.id">{{ option.name }}</option>
    </select>
  </div>
</template>
<script>
import RestApi from "../common/js/restApi"
export default {
  "name":"roleSelect",
  props:["selectedRoles"],
  data(){
    return {
      restApi:null,
      role:1,
      roles:[]
    }
  },
  created:function(){
    this.restApi = new RestApi()
  },
  mounted:function(){
    this.roles = this.selectedRoles
  },
  methods:{

    loadRoles:function(){
      this.roles = this.restApi.getRoles()
    },
    change: function(ele){
      this.$emit('rolechanged', this.role)
    }
  }
}
</script>

